<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet"
          href="./bootstrap-3.3.7-dist/css/bootstrap.min.css"/>
    <!--<link rel="stylesheet" href="./layui/css/layui.css"/>-->
    <script src="./bootstrap-3.3.7-dist/js/jquery-3.1.1.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="./bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script src="./layui/layui.all.js"></script>
    <script src="https://code.angularjs.org/1.4.0-rc.1/angular.js"></script>
    <style type="text/css">
        .container {
            margin-top: 100px;
            width: 350px;
            height: 300px;
        }

        #inputEmail {
            height: 50px;
        }

        #inputPassword {
            height: 50px;
        }

        a {
            text-decoration: none;
        }

    </style>
</head>

<body>
<div class="container">

    <h2 class="form-signin-heading">Please sign in</h2>
    <a href="/register.html">注册新用户</a>

    <input type="text" id="inputEmail" name="name" class="form-control" placeholder="Username" ng-model="name"
           required>
    <br>
    <input type="password" id="inputPassword" name="password" class="form-control" placeholder="Password"
           ng-model="password" required>
    <br>
    <button class="btn btn-lg btn-primary btn-block" id="sublogin">Sign in</button>
</div> <!-- /container -->
</body>
<script type="text/javascript">
    var layer = layui.layer;
    $('#sublogin').click(function (e) {
        var name = $("#inputEmail").val();
        var pwd = $("#inputPassword").val();
        if(name.length > 10){
            layer.msg('用户名不能大于10位');
            return;
        }
        if(pwd.length > 13){
            layer.msg('密码不能大于13位');
            return;
        }
        $.ajax({
            url: 'login',
            method: 'POST',
            dataType: "json",
            traditional: true,
            data: {
                "name": $("#inputEmail").val(),
                "password": $("#inputPassword").val(),
            },
            success: function (data) {
                if(data.status == 'ok'){
                    layer.msg(data.msg);
                    window.location.href = '/main.html';
                }else{
                    layer.msg(data.msg);
                }
            },
            error: function (data) {

            }
        });
    })
</script>
</html>
